<template>
  <div>
    <div class="header">
      <span>搜索用户数</span>
      <svg
        t="1642768603781"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2769"
        width="26"
        height="26"
      >
        <path
          d="M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0z m0 896A384 384 0 0 1 512 128a384 384 0 0 1 0 768z m29.696-194.88c-11.136 10.112-24.96 17.344-31.488 15.36-6.08-1.792-9.536-7.424-8.384-13.056l89.344-248c7.424-31.488-12.736-60.16-55.424-63.872-44.8 0-110.976 40.128-151.232 90.944 0 6.08-1.344 21.12 0.128 30.208l53.632-54.208c11.008-10.176 23.808-17.344 30.336-15.424 6.592 1.92 10.112 8.384 8 14.464l-88.704 246.848c-10.176 28.864 9.152 57.152 56.192 63.616 68.928 0 109.888-39.168 150.208-89.984 0-6.08 2.368-22.08 0.96-31.104l-53.568 54.208zM575.744 192c-35.584 0-64.448 25.728-64.448 63.808 0 37.952 28.864 63.744 64.448 63.744 35.648 0 64.448-25.728 64.448-63.744 0-38.08-28.8-63.808-64.448-63.808z"
          p-id="2770"
          fill="#bfbfbf"
        ></path>
      </svg>
    </div>
    <div class="main">
      <span class="main-title">12321</span>
      <span class="main-content">17.1</span>
      <svg
        t="1642771496423"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4470"
        width="26"
        height="26"
      >
        <path d="M325.456896 862.27968" p-id="4471" fill="#d81e06"></path>
        <path d="M882.05824 862.27968" p-id="4472" fill="#d81e06"></path>
        <path d="M236.027904 877.161472" p-id="4473" fill="#d81e06"></path>
        <path d="M960.132096 877.161472" p-id="4474" fill="#d81e06"></path>
        <path d="M64.134144 845.290496" p-id="4475" fill="#d81e06"></path>
        <path
          d="M131.974144 648.752128c-30.418944 30.430208-6.474752 84.301824 34.917376 84.301824L858.258432 733.053952c42.899456 0 65.325056-53.85216 34.916352-84.301824L547.487744 302.569472c-19.930112-19.974144-49.374208-19.95264-69.327872 0L131.974144 648.752128z"
          p-id="4476"
          fill="#d81e06"
        ></path>
        <path d="M960.51712 845.290496" p-id="4477" fill="#d81e06"></path>
      </svg>
      <svg
        t="1642771559784"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4696"
        width="26"
        height="26"
      >
        <path d="M325.456896 862.27968" p-id="4697" fill="#1afa29"></path>
        <path d="M882.05824 862.27968" p-id="4698" fill="#1afa29"></path>
        <path d="M236.027904 877.161472" p-id="4699" fill="#1afa29"></path>
        <path d="M960.132096 877.161472" p-id="4700" fill="#1afa29"></path>
        <path d="M63.683584 788.737024" p-id="4701" fill="#1afa29"></path>
        <path d="M958.46912 788.737024" p-id="4702" fill="#1afa29"></path>
        <path d="M64.77824 858.791936" p-id="4703" fill="#1afa29"></path>
        <path
          d="M163.396608 289.168384c-40.577024 0-66.526208 54.183936-35.44064 85.25824L477.217792 723.704832c20.031488 20.031488 49.82272 20.031488 69.853184 0l349.274112-349.278208c30.30528-30.294016 6.677504-85.25824-34.927616-85.25824L163.396608 289.168384z"
          p-id="4704"
          fill="#1afa29"
        ></path>
        <path d="M959.522816 858.791936" p-id="4705" fill="#1afa29"></path>
      </svg>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
export default {
  mounted() {
    // 初始化echarts实例
    //console.log(echarts,'echarts');
    let lineCharts = echarts.init(this.$refs.charts);
    // 配置数据
    lineCharts.setOption({
      xAxis: {
        show: false, //隐藏x轴
        type: "category", //均分
      },
      yAxis: {
        show: false, //隐藏y轴
      },
      series: [
        {
          type: "line",
          smooth: true,
          data: [20, 7, 33, 12, 48, 9, 29],
          // 拐点样式设置
          itemStyle: {
            opacity: 0,
          },
          // 线条颜色设置
          lineStyle: {
            color: "blue",
          },
          // 填充颜色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "skyblue",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
        },
      ],
      // 调试布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  color: #666;
}
.icon {
  padding-left: 10px;
}
.main {
  display: flex;
  align-items: center;
  margin: 10px 0px;
}
.main-title {
  margin-right: 30px;
}
.main-content {
  margin-right: 10px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>